<template>
  <div>

    <el-row :gutter='3'>
      <el-col :span='span1' class='col1' v-show='show '>
        <el-input
          placeholder='输入关键字进行过滤'
          v-model='filterText'>
        </el-input>

        <el-tree
          class='filter-tree'
          :data='data'
          :props='defaultProps'
          default-expand-all
          :filter-node-method='filterNode'
          ref='tree'>
        </el-tree>
      </el-col>
      <el-col :span='span2' class='icon' v-show='show '>
        icon

      </el-col>
      <el-col :span='span3' class='col2'>
        content
        <el-button type='primary' @click='start'>start</el-button>
      </el-col>
    </el-row>


  </div>
</template>

<script>
export default {
  name: 'myTree100',
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  data() {
    return {
      filterText: '',
      data: [{
        id: 1,
        label: '一级 1',
        children: [{
          id: 4,
          label: '二级 1-1',
          children: [{
            id: 9,
            label: '三级 1-1-1'
          }, {
            id: 10,
            label: '三级 1-1-2'
          }]
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      show: true,
      span1: 5,
      span2: 1,
      span3: 18
    }
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    start() {
      this.show = !this.show
      if (!this.show) {
        this.span1 = 0
        this.span2 = 0
        this.span3 = 24
      } else {
        this.span1 = 5
        this.span2 = 1
        this.span3 = 18
      }

    }
  }
}
</script>

<style scoped>
.content {
  width: 25%;
}

.el-row {
  height: 320px;
}

.col1 {
  height: 320px;
}

.col2 {
  border: 1px solid black;
  height: 320px;
  line-height: 320px;
}

.icon {
  vertical-align: middle;
  margin: auto;
  height: 320px;
  line-height: 320px;
}


</style>